import React, { useState } from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import {
    DesktopOutlined,
    PieChartOutlined,
} from '@ant-design/icons';
import '../static/css/AdminIndex.css'

import { Route } from "react-router-dom";
import AddArticle from './AddArticle'
import ArticleList from './ArticleList'


const { Header, Content, Footer, Sider } = Layout;
// const { SubMenu } = Menu;

function AdminIndex(props) {
    const [collapsed, setCollapsed] = useState(false)

    const onCollapse = collapsed => {
        setCollapsed(collapsed);
    };

    const handleClickArticle = e => {
        if (e.key == 'addArticle') {
            props.history.push('/index/add')
        } else {
            props.history.push('/index/list')
        }
    }

    return (
        <Layout style={{ minHeight: '100vh', minWidth: "100vh" }}>
            <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
                <div className="logo" />
                <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" onClick={handleClickArticle}>
                    <Menu.Item key="1" icon={<PieChartOutlined />}>工作台</Menu.Item>
                    <Menu.Item key="addArticle" icon={<DesktopOutlined />}>添加文章 </Menu.Item>
                    <Menu.Item key="ArticleList" icon={<DesktopOutlined />}>文章列表 </Menu.Item>
                </Menu>
            </Sider>
            <Layout className="site-layout">
                {/* <Header className="site-layout-background" style={{ padding: 0 }} /> */}
                <Content style={{ margin: '0 16px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>首页</Breadcrumb.Item>
                        <Breadcrumb.Item>工作台</Breadcrumb.Item>
                    </Breadcrumb>
                    <div className="site-layout-background" style={{ padding: 24 }}>

                        <Route path="/index/" exact component={AddArticle} />
                        <Route path="/index/add/" exact component={AddArticle} />
                        <Route path="/index/add/:id" exact component={AddArticle} />
                        <Route path="/index/list/" component={ArticleList} />

                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>@2020 - 梦魇</Footer>
            </Layout>
        </Layout>
    );
}
export default AdminIndex